<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>未登录首页</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<!-- 引入字体 -->
	<script th:src="@{/js/libs/webfontloader.min.js}"></script>
	<script>
		WebFont.load({
			google: {
				families: ['Roboto:300,400,500,700:latin']
			}
		});
	</script>
	<!-- 引入bootstrap css -->
	<link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap-reboot.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap-grid.css}">
	<!-- 引入主要 css -->
	<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/css/fonts.min.css}">
</head>
<body>
<!-- Preloader 预加载 -->
<div id="hellopreloader">
	<div class="preloader">
		<svg width="45" height="45" stroke="#fff">
			<g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
				<circle cx="22" cy="22" r="6" stroke="none">
					<animate attributeName="r" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite"
							 values="6;22"/>
					<animate attributeName="stroke-opacity" begin="1.5s" calcMode="linear" dur="3s"
							 repeatCount="indefinite" values="1;0"/>
					<animate attributeName="stroke-width" begin="1.5s" calcMode="linear" dur="3s"
							 repeatCount="indefinite" values="2;0"/>
				</circle>
				<circle cx="22" cy="22" r="6" stroke="none">
					<animate attributeName="r" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
							 values="6;22"/>
					<animate attributeName="stroke-opacity" begin="3s" calcMode="linear" dur="3s"
							 repeatCount="indefinite" values="1;0"/>
					<animate attributeName="stroke-width" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
							 values="2;0"/>
				</circle>
				<circle cx="22" cy="22" r="8">
					<animate attributeName="r" begin="0s" calcMode="linear" dur="1.5s" repeatCount="indefinite"
							 values="6;1;2;3;4;5;6"/>
				</circle>
			</g>
		</svg>
		<div class="text">Loading ...</div>
	</div>
</div>
<!-- ... end Preloader 结束预加载-->

<!-- Header-BP-logout 头部导航栏（登出状态）-->
<header class="header header--logout" id="site-header">
    <a href="#" class="logo">
        <div class="img-wrap">
            <img src="../static/img/logo.png" th:src="@{/img/logo.png}" alt="Olympus">
        </div>
    </a>
    <div class="page-title">
        <h6>欢迎光临</h6>
    </div>
    <div class="header-content-wrapper">
        <div class="form--login-logout">
            <form class="form-inline">
                <a href="01-LandingPage.html" th:href="@{/login}" class="btn btn-primary btn-md-2">登录/注册</a>
            </form>
        </div>
    </div>
</header>
<!-- 结束头部导航栏（登出状态） -->

<!--头部空间-->
<div class="header-spacer-small"></div>
<!--end头部空间-->

<!-- 新闻广场头部 -->
<div class="main-header">
    <div class="content-bg-wrap bg-group"></div>
    <div class="container">
        <div class="row">
            <div class="col col-lg-8 m-auto col-md-8 col-sm-12 col-12">
                <div class="main-header-content">
                    <h1>欢迎来到交友网站！</h1>
                    <p>
						在本交友网站中，您可以轻松与陌生人交流，与他们成为好友！您可以与他们一起玩乐！高品质交友，会员更省心。你将不会孤独!<br>
						In this dating website, you can easily communicate with strangers and become friends with them!
						You can play with them! Make friends with high quality, members are more relaxed. You will not be alone!
					</p>
                </div>
            </div>
        </div>
    </div>
    <img class="img-bottom" th:src="@{/img/group-bottom.png}" src="../static/img/group-bottom.png" alt="friends">
</div>
<!-- 结束新闻广场头部 -->

<!--新闻广场主体-->
<div class="container">
	<div class="row">
		<!--主体左侧-->
		<div class="col col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
			<div class="ui-block responsive-flex">
				<div class="ui-block-title">
					<i class="icon fa fa-star c-yellow" aria-hidden="true"></i>
					<div class="h6 title">Have a good day&nbsp;;-)</div>
				</div>
				<!-- 新闻列表 -->
				<table class="open-topic-table">
					<tbody>
					<!--一个新闻列表项--><!--数据：新闻标题、新闻内容概要、新闻详情html、发布时间-->
					<div th:each="news, newsStat: ${hotNews}" th:if="${newsStat.count}<=3">
						<tr>
							<td class="topic-date" colspan="2"
								th:text="${#calendars.format(news.newsPublishTime,'yyyy-MM-dd HH:mm:ss')}">
								March 24th, 2016 at 6:42 pm
							</td>
						</tr>
						<tr>
							<td class="author">
								<div class="author-thumb">
									<!--默认照片-->
									<img th:src="@{/img/avatar1.jpg}" alt="新闻">
								</div>
							</td>
							<td class="posts">
								<div class="author-content">
									<a href="newsDetail.html" class="h6 author-name" th:text="${news.newsTitle}">新闻标题</a>
								</div>
								<p th:text="${news.newsContent}">
									Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio odit quos mollitia
									quis animi suscipit quaerat beatae obcaecati officiis voluptas reprehenderit officia
									nulla voluptatem ex consequuntur eveniet error porro. Alias.LoremLorem ipsum dolor sit
									amet, consectetur adipisicing elit. Distinctio odit quos mollitia quis animi suscipit
									quaerat beatae obcaecati officiis voluptas reprehenderit officia nulla voluptatem ex
									consequuntur eveniet error porro. Alias.Lorem
								</p>
							</td>
						</tr>
					</div>
					</tbody>
				</table>
				<!-- 结束新闻列表 -->
			</div>
		</div>
		<!--结束主体左侧-->
		<!--主体右侧-->
		<div class="col col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
<!--			<p th:text="${publishes}"></p>-->
			<!--热门动态模块--><!--数据：热门动态标题、发布时间、人们动态html地址-->
			<div class="ui-block">
				<div class="ui-block-title">
					<h6 class="title">热门动态</h6>
				</div>
				<div class="ui-block-content">
					<!-- Widget Featured Topics -->
					<ul class="widget w-featured-topics"
						th:each="publish, publishStat : ${publishes}" th:if="${publishStat.count}<=3">
						<!--单条热门动态-->
						<li>
							<i class="icon fa fa-star" aria-hidden="true"></i>
							<div class="content">
								<a href="#"
								   class="h6 title" th:text="${publish.pTitle}">热门动态标题1</a>
								<time class="entry-date updated"
									  th:text="${#calendars.format(publish.pTime,'yyyy/MM/dd HH:mm')}">2021/3/15 11:57</time>
							</div>
						</li>
						<!--结束单条热门动态-->
					</ul>
					<!-- ... end Widget Featured Topics -->
				</div>
			</div>
			<!--结束热门动态模块-->

			<!--热门用户模块--><!--数据：热门用户头像、昵称、html主页-->
			<div class="ui-block">
				<div class="ui-block-title">
					<h6 class="title">热门用户</h6>
				</div>
				<!-- W-Action -->
				<ul class="widget w-friend-pages-added notification-list friend-requests"
					th:each="user,userStat : ${hotUsers}" th:if="${userStat.count}<=3">
					<!--单条热门用户-->
					<li class="inline-items">
						<div class="author-thumb">
							<img style="width: 42px; height: 42px;" th:src="@{'/img/'+${user.headPhoto}}" alt="author">
						</div>
						<div class="notification-event">
							<a href="#" class="h6 notification-friend" th:text="${user.uname}">
								Hugh Wilson
							</a>
						</div>
							<span class="notification-icon">
								<!--事件：提交好友请求-->
								<form th:action="@{/login}" th:method="get">
									<button class="accept-request" title="加好友" type="submit">
										<span class="icon-add without-text">
											<svg class="olymp-happy-face-icon">
												<use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-happy-face-icon"
													 th:href="@{/svg-icons/sprites/icons.svg#olymp-happy-face-icon}"></use></svg>
										</span>
									</button>
								</form>
							</span>
					</li>
					<!--结束单条热门用户-->
				</ul>
				<!-- ... end W-Action -->
			</div>
			<!--结束热门用户模块-->
		</div>
		<!--结束主体右侧-->
	</div>
</div>
<!--end新闻广场主体-->

<!--向上返回 按钮-->
<a class="back-to-top" href="#">
	<img th:src="@{/svg-icons/back-to-top.svg}" alt="arrow" class="back-icon">
</a>

<!-- JS Scripts -->
<script th:src="@{/js/jQuery/jquery-3.4.1.js}"></script>
<script th:src="@{/js/libs/jquery.appear.js}"></script>
<script th:src="@{/js/libs/jquery.mousewheel.js}"></script>
<script th:src="@{/js/libs/perfect-scrollbar.js}"></script>
<script th:src="@{/js/libs/jquery.matchHeight.js}"></script>
<script th:src="@{/js/libs/svgxuse.js}"></script>
<script th:src="@{/js/libs/imagesloaded.pkgd.js}"></script>
<script th:src="@{/js/libs/Headroom.js}"></script>
<script th:src="@{/js/libs/velocity.js}"></script>
<script th:src="@{/js/libs/ScrollMagic.js}"></script>
<script th:src="@{/js/libs/jquery.waypoints.js}"></script>
<script th:src="@{/js/libs/jquery.countTo.js}"></script>
<script th:src="@{/js/libs/popper.min.js}"></script>
<script th:src="@{/js/libs/material.min.js}"></script>
<script th:src="@{/js/libs/bootstrap-select.js}"></script>
<script th:src="@{/js/libs/smooth-scroll.js}"></script>
<script th:src="@{/js/libs/selectize.js}"></script>
<script th:src="@{/js/libs/swiper.jquery.js}"></script>
<script th:src="@{/js/libs/isotope.pkgd.js}"></script>
<script th:src="@{/js/libs/ajax-pagination.js}"></script>
<script th:src="@{/js/libs/circle-progress.js}"></script>
<script th:src="@{/js/libs/loader.js}"></script>
<script th:src="@{/js/libs/run-chart.js}"></script>
<script th:src="@{/js/libs/jquery.magnific-popup.js}"></script>
<script th:src="@{/js/libs/ion.rangeSlider.js}"></script>

<script th:src="@{/js/main.js}"></script>
<script th:src="@{/js/libs-init/libs-init.js}"></script>
<script defer th:src="@{/fonts/fontawesome-all.js}"></script>

<script th:src="@{/Bootstrap/dist/js/bootstrap.bundle.js}"></script>

</body>

</html>